<template>
    <el-dialog :model-value="show" :title="id === 0 ? '添加角色' : '编辑角色'" @close="emit('edReShow', false)">
        <el-form ref="formRef" :model="form" :rules="rules">
            <el-form-item label="角色名称" prop="name">
                <el-input v-model="form.name" autocomplete="off" />
            </el-form-item>
            <el-form-item label="描述" prop="description">
                <el-input v-model="form.description" :rows="4" type="textarea" autocomplete="off" />
            </el-form-item>
            <el-form-item label="是否启用" prop="status">
                <el-radio-group v-model="form.status" class="ml-4">
                    <el-radio label="1" size="large">是</el-radio>
                    <el-radio label="2" size="large">否</el-radio>
                </el-radio-group>
            </el-form-item>

        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="NosubmitForm">取消</el-button>
                <el-button type="primary" @click="submitForm">
                    确定
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script setup lang='ts'>
import { reactive, ref, watch } from 'vue';
import { ElMessage, ElMessageBox, FormInstance } from 'element-plus'
import { addRoleApi, updateRoleApi } from './api';

const props = defineProps({
    show: {
        type: Boolean,
        default: false
    },
    id: {
        type: Number,
        default: 0
    },
    row: {
        type: Object,
    }
})
const rowData = props.row as IRoleListData
// 监听id的变化，获取角色信息
watch(() => props.id, () => {
    if (props.id !== 0) {
        // Object.assign(form, props.row)
        Object.assign(form, rowData)
    }
})

// 编辑框内ref数据
const formRef = ref<FormInstance>()
const emit = defineEmits(['edReShow'])

// 请求的参数
const form = reactive<IRoleListData>({
    "adminCount": 0,
    "createTime": "",
    "description": "",
    "id": 0,
    "name": "",
    "sort": 0,
    "status": 0
})




// 规则
const rules = reactive({
    name: [{ required: true, trigger: "blur", message: "请填写角色名称" }],
    status: [{ required: true, trigger: "blur", message: "请选择是否启用" }]
})

// 获取角色信息


// 添加角色
const addRole = () => {
    ElMessageBox.confirm('确定要添加角色吗', '添加角色', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
    }).then(() => {
        addRoleApi(form).then((res) => {
            if (res.code === 200) {
                // 提示
                ElMessage.success('添加成功')
                // 把dialog关闭
                // 刷新数据
                emit("edReShow", true);
                // 清空表单
                formRef.value?.resetFields();
            }
        })
    }).catch(() => {
        ElMessage.error('添加失败,请重新添加')
    })
}

// 修改用户
const editRole = () => {
    ElMessageBox.confirm('确定要修改用户信息吗', '修改用户信息', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: "warning",
    }).then(() => {
        updateRoleApi(form).then((res) => {
            // console.log("135", res);
            if (res.code === 200) {
                // 提示
                ElMessage.success('修改成功')
                // 把dialog关闭
                // 刷新数据
                emit("edReShow", true);
                // 清空表单
                formRef.value?.resetFields();
            }
        })
    }).catch(() => {
        ElMessage.error('修改失败,请重新修改')
    })
}

// 点击确定
const submitForm = () => {
    formRef.value?.validate((bool: boolean) => {
        if (bool) {
            if (props.id === 0) {
                // 添加
                addRole()
            } else {
                // 修改
                editRole()
            }

        } else {
            ElMessage.error('请输入完整信息')
        }
    })
}

// 点击取消
const NosubmitForm = () => {
    // 把dialog关闭
    // 刷新数据
    emit("edReShow", false);
    // 清空表单
    formRef.value?.resetFields();
}


</script>
<style lang="less" scoped>

</style>